@import 'src/styles/constants';

.code-section {
  padding-bottom: 5%;

  .headline {
    text-align: center;
  }

  .code-example {
    display: flex;
    flex-direction: column;
    width: 80vw;

    @include desktop {
      width: 35vw;
    }

    .view-docs-button {
      margin-top: 40px;
      align-self: center;
    }
  }

  .tabs {
    display: flex;
    border: 1px solid;
    height: 32px;

    @include desktop {
      height: 46px;
    }

    .tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.8em;
      transition: 0.2s all;

      &:not(:last-child) {
        border-right: 1px solid;
      }

      &.selected {
        background-color: $black;
        color: $white;
      }
    }
  }

  .tab-page {
    .code {
      background-color: $black;
      padding: 20px;
      width: 100%;
    }
  }
}
